<template>
  <div class="dialog-container">
    <el-dialog
      :visible.sync="dialog"
      title="导出"
      width="550px"
      show-close
      :before-close="handleClose"
    >
      <div class="dialog-title">选择导出的选项</div>
      <div class="time-footer" style="text-align: center">
        <span slot="footer">
          <el-button
            v-for="item of list"
            :key="item.type"
            type="primary"
            class="ex-btn"
            @click="exportList(item.type)"
          >
            {{ item.val }}
          </el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ExportDialog",
  props: {
    exportData: {
      // 操作的父组件DOM
      type: Object,
      default: () => {},
      require: true
    },
    dataSource: {
      // 传递的参数
      type: Object,
      default: () => {},
      require: false
    },
    total: {
      // 数据总数
      type: Number,
      default: 0
    },
    dialog: {
      // 控制模态框显示隐藏
      type: Boolean,
      default: () => false,
      require: true
    },
    status: {
      // 导出状态：待排车10，取消99
      type: String,
      default: () => "",
      require: false
    }
  },
  computed: {
    list() {
      if (this.exportData) {
        const { selection, tableData } = this.exportData;
        return [
          { val: `选中项(${selection.length}条)`, type: "1" },
          { val: `本页(${tableData.length}条)`, type: "2" },
          { val: "全部", type: "3" }
        ];
      }
      return [];
    }
  },
  methods: {
    exportList(type) {
      let par = {};
      const { selection } = this.exportData;
      switch (type) {
        case "1":
          if (selection.length === 0) {
            this.$message.error("请选择要导出的数据！");
            return;
          }
          par = {
            ids: selection.map(item => item.id)
          };
          break;
        case "2":
          par = {
            offset: 1,
            ...this.dataSource
          };
          break;
        case "3":
          par = {
            ...this.dataSource
          };
          delete par.offset;
          delete par.limit;
          break;
      }
      this.$emit("onOk", {
        type,
        params: par
      });
    },
    handleClose() {
      this.$emit("onClose", { dialog: false });
    },
    handleTrim(obj) {
      const newPar = {};
      for (const key in obj) {
        if (
          (obj[key] === 0 || obj[key]) &&
          obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
        ) {
          newPar[key] = obj[key];
        } else {
          newPar[key] = obj[key];
        }
      }
      return newPar;
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  ::v-deep .el-dialog__header {
    box-shadow: 0px -1px 0px 0px #eeeeee inset;
  }

  .dialog-title {
    text-align: center;
    margin: 50px 0;
    font-size: 18px;
  }

  .ex-btn {
    padding: 10px;
    width: 120px;
  }
}
</style>
